@extends('front.layout')

@section('title')
    {{$post->title}}
@endsection

@section('content')

    <div class="container">
        <div class="row">
            <div class="col-md-12" style="margin-left: 10%">
                <h1 class="title">{{$post->title}}</h1>
                <div>
                    @foreach($post->tags as $tag)
                        <div class="chip z-depth-1 blue hoverable ">
                            <a href="{{route('tag.show',$tag->id)}}" class="white-text">{{$tag->tag}}</a>
                        </div>

                    @endforeach
                </div>
                {{--<p>{!! \GrahamCampbell\Markdown\Facades\Markdown::convertToHtml($post->body) !!}</p>--}}

                {!!$post->body!!}

                <div class="social-share"></div>
                <div class="row">
                    <div class="col s12 ">
                        @foreach($post->comments as $comment)
                            <div class="card blue-grey darken-6">
                                <div class="card-content white-text">
                                    <span class="card-title"> <a href="@if($comment->url) HTTP://{{$comment->url}}@else#@endif">{{$comment->name}}：</a></span>
                                    <p>{{$comment->comment}}</p>
                                </div>

                            </div>
                        @endforeach
                    </div>
                </div>
                <ul class="collapsible " data-collapsible="accordion">
                    <li>
                        <div class="collapsible-header">  <i class="material-icons prefix">mode_edit</i>点击留言</div>
                        <div class="collapsible-body">
                            <div class="row">
                                <form class="col s12" action="{{route('comment.store').'?id='.$post->id}}" method="post" class="discuss">
                                    {{csrf_field()}}
                                    <div class="row">
                                        <div class="input-field col s6">
                                            <i class="material-icons prefix">account_circle</i>
                                            <input id="username" type="text" class="validate" name="name">
                                            <label for="username">姓名</label>
                                        </div>
                                        <div class="input-field col s6">
                                            <i class="material-icons prefix">language</i>
                                            <input id="url" type="tel" class="validate" name="url">
                                            <label for="url">网址</label>
                                        </div>

                                    </div>
                                    <div class="input-field">
                                        <i class="material-icons prefix">mode_edit</i>
                                        <textarea id="textarea1" class="materialize-textarea" name="comment"></textarea>
                                        <label for="textarea1">评论框</label>
                                    </div>

                                    <div class="center">
                                        <button class="btn waves-effect waves-light"  type="submit" name="action">提交
                                            <i class="material-icons right">send</i>
                                        </button>
                                    </div>
                                </form>
                            </div>

                        </div>
                    </li>

                </ul>

            </div>
        </div>
    </div>

    <style>
        pre {
            display: block;
            padding: 16px;
            margin: 0 0 16px;
            line-height: 16px;
            font-size: 18px;
            border: 1px solid #d9d9d9;
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: antiquewhite;

        }
        code{
            white-space: pre;
        }
        body {
            font-family: "Montserrat", "微软雅黑";
            font-weight: 400;
            font-size: 16px;
            word-spacing: 1px;
            color: #666;
            margin: 0;
        }
        h1, h2, h3, h4, h5, h6 {
            font-weight: 400;
            color: #444;
        }
        h1 {
            font-size: 32px;
            margin: 0 0 45px;
        }
        h2 {
            position: relative;
            font-size: 24px;
            padding-left: 15px;
        }
        h3 {
            font-size: 1.17em;
            color: #f66;
            font-weight: bold;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }
        h4 {
            margin: 15px 0;
        }
        h2:before {
            content: '';
            width: 5px;
            background: #f66;
            position: absolute;
            left: 0px;
            height: 75%;
            top: 12%;
        }
        blockquote {
            margin: 2em 0;
            padding-left: 30px;
            border-left: 10px solid #e6e6e6;
        }
        p {
            line-height: 1.8em;
        }
        li {
            line-height: 1.8em;
        }
        a {
            text-decoration: none;
            color: #f66;
            border-bottom: 2px solid transparent;
        }
        a:hover {
            color: #f33;
            border-bottom-color: #f33;
        }
    </style>
@endsection

